<template>
    <div>
       <div style="display:flex">
          <search @search="search" ></search> <el-button type="primary" @click="add" style="margin-left:20px;">添加</el-button>
       </div>
        <Tables :data="list" :cols="cols"  :pageNum="this.pagenum" :pageSize="this.pagesize" :total="this.total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
            <template v-slot:action='{row}' >
                <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(row.id)" title="编辑"></el-button>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="dels(row.id)" title="删除"></el-button>
                <el-button type="warning" size="mini" icon="el-icon-setting" title="分配权限"></el-button>
            </template>
            <template v-slot:state='{row}' >
                <el-switch v-model="row.mg_state" active-color="#13ce66" inactive-color="#ff4949" @change="editStatus(row)"></el-switch>
            </template>
        </Tables>

      <!-- <Modal :title="title" :show="show" @yes="yes" @no="no"></Modal> -->
       <el-dialog
        :title="title"
        :visible.sync="show"
        width="30%">
          <el-form ref="form" :rules="rules" :model="userform" label-width="80px">
              <el-form-item label="用户名" :disabled="!this.isok" prop="username">
                  <el-input v-model="userform.username"></el-input>
              </el-form-item>
              <el-form-item v-if="!this.isok" label="密码" prop="password">
                  <el-input v-model="userform.password"></el-input>
              </el-form-item>
              <el-form-item  label="邮箱" prop="email">
                  <el-input v-model="userform.email"></el-input>
              </el-form-item>
              <el-form-item label="手机" prop="mobile">
                  <el-input v-model="userform.mobile"></el-input>
              </el-form-item>
          </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="no">取 消</el-button>
            <el-button type="primary" @click="yes">确 定</el-button>
        </span>
        </el-dialog>

    </div>
</template>

<script>
import Tables from "../../components/table.vue";
import search from "../../components/search.vue";
import Modal from "../../components/Modal.vue";
import { getUserlist, Searchs, adds, edit,edits,editstatus,del } from "../../api/user.js";
export default {
  components: { Tables, search, Modal },
  data() {
    return {
      pagenum: 1,
      pagesize: 10,
      total: 0,
      show: false,
      title: "",
      list: [],
      id: 0,
      isok: false,
      cols: [
        {
          label: "#",
          type: "index"
        },
        {
          label: "姓名",
          name: "username"
        },
        {
          label: "邮箱",
          name: "email"
        },
        {
          label: "电话",
          name: "mobile"
        },
        {
          label: "角色",
          name: "role_name"
        },
        {
          label: "状态",
          slot: "state"
        },
        {
          label: "操作",
          slot: "action",
          align: "center",
          width: 270
        }
      ],
      userform: {
        username: "",
        password: "",
        email: "",
        mobile: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度最少6位", trigger: "blur" }
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
            message: "请输入正确格式的邮箱",
            trigger: "blur"
          }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
            message: "请输入正确格式的邮箱",
            trigger: "blur"
          }
        ]
      }
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    async getUser() {
      let res = await getUserlist({
        pagenum: this.pagenum,
        pagesize: this.pagesize
      });
      console.log(res);
      this.list = res.data.data.users;
      this.total = res.data.data.total;
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.getUser();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.getUser();
    },
    async search(val) {
      let res = await Searchs({ query: val, pagenum: 1, pagesize: 2 });
      console.log(res);
      this.list = res.data.data.users;
    },
    async add() {
      this.title = "添加用户";
      this.show = true;
      this.isok = false;
      this.userform = {
        username: "",
        password: "",
        email: "",
        mobile: ""
      };
    },
    edit(val) {
        this.title='编辑用户'
        this.show=true
        this.id=val;
        this.isok=true
        edit(this.id).then(res=>{
          console.log(res);
          this.userform=res.data.data
          console.log(this.userform);
       })
    },
    yes() {
      if (this.isok==true) {
        this.title = "编辑用户";
        this.show = false;
        this.isok = true;
        edits(this.id,this.userform).then(res => {
          console.log(res);
          this.userform = res.data.data;
          this.$message.success(res.data.meta.msg)
          this.getUser();
        });
        
      } else {
        this.show = false;
        console.log(this.userform);
        adds(this.userform).then(res => {
          this.$message.success(res.data.meta.msg);
        });
        this.getUser();
      }
    },
    no() {
      this.show = false;
    },
    editStatus(val){
      console.log(val);
      editstatus(val).then(res=>{
        console.log(res);
      })
    },
    dels(val){
      console.log(val);
      del(Number(val)).then(res=>{
        console.log(res);
        this.$message.success(res.data.meta.msg);
        this.getUser();
      })
    }
  }
};
</script>

<style lang="sass" scoped>

</style>